<template>
  <el-dialog
    v-model="visible"
    width="1700px"
    custom-class="patrolDialog"
    :lock-scroll="false"
    :title="config.title || ''"
    @close="config.close"
  >
    <BaseForm
      ref="baseForm"
      :is-readonly="config.readonly"
      :default-value="dataForm"
      @setBaseParams="setBaseParams"
    />
    <div class="tableContainer">
      <el-button
        icon="iconfont icon--tainjia"
        :disabled="config.readonly"
        size="mini"
        type="primary"
        @click="addStep"
        >添加路线</el-button
      >
      <!-- <el-button
        icon="iconfont icon--tainjia"
        :disabled="config.readonly"
        size="mini"
        class="add-purple"
        @click="openDialog"
        >批量添加</el-button
      > -->
      <!-- 批量添加的弹出框 -->
      <el-dialog
        v-if="dialogVisible"
        v-model="dialogVisible"
        title="批量添加的菜单"
        :append-to-body="true"
        width="30%"
        class="alarm-design"
      >
        <el-form :rules="rules" label-position="top">
          <el-form-item prop="areaTree" label="选择区域：">
            <el-cascader v-model="selectArea" :options="areaTree" style="width: 100%">
            </el-cascader>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="addStepByProject">保存</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>

      <el-table
        ref="singleTable"
        class="stepTable"
        :data="dataForm.jobList"
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="orderNum" width="78" align="center" label="序号"> </el-table-column>
        <el-table-column label="项目" width="240">
          <template #default="scope">
            <el-cascader
              v-if="!config.readonly"
              v-model="scope.row.projectId"
              style="width: 100%"
              :options="areaTree"
              :show-all-levels="false"
              @change="id => projectIdChange(id, scope.row)"
            ></el-cascader>
            <div v-else class="selectText">{{ scope.row.projectName || scope.row.projectId }}</div>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" width="240">
          <template #default="scope">
            <el-select
              v-if="!config.readonly"
              v-model="scope.row.deviceType"
              placeholder="请选择"
              clearable
              style="width: 100%"
              @change="id => deviceTypeChange(id, scope.row)"
            >
              <el-option
                v-for="(item, idx) in deviceTypes"
                :key="idx"
                :label="item"
                :value="idx"
              ></el-option>
            </el-select>
            <div v-else class="selectText">
              {{ deviceTypes[scope.row.deviceType] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="设备" width="240">
          <template #default="scope">
            <el-select
              v-if="!config.readonly"
              v-model="scope.row.deviceId"
              placeholder="请选择"
              filterable
              clearable
              style="width: 100%"
              @change="id => deviceChange(id, scope.row)"
            >
              <el-option
                v-for="item in scope.row.devices"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <div v-else class="selectText">
              {{ scope.row.deviceName || scope.row.deviceId }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="巡检标准" width="240">
          <template #default="scope">
            <el-select
              v-if="!config.readonly"
              v-model="scope.row.criterionId"
              clearable
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in scope.row.steps"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <div v-else class="selectText">
              {{ scope.row.criterionName || scope.row.criterionId }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="scope">
            <input
              v-model="scope.row.remark"
              type="text"
              class="workContentInput"
              placeholder="请输入"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="264">
          <template #default="scope">
            <el-button
              style="border: none"
              :disabled="config.readonly"
              type="text"
              class="iconfont icon-shangyi"
              size="small"
              :style="{
                color: '#4195F0'
              }"
              @click="setStep(scope.row, 'up')"
              >上移</el-button
            >
            <el-button
              style="border: none"
              :disabled="config.readonly"
              type="text"
              class="iconfont icon-xiayi"
              size="small"
              :style="{
                color: '#4195F0'
              }"
              @click="setStep(scope.row, 'down')"
              >下移</el-button
            >
            <el-button
              style="border: none"
              :disabled="config.readonly"
              type="text"
              class="iconfont icon-shanchu1"
              size="small"
              :style="{
                color: '#4195F0'
              }"
              @click="setStep(scope.row, 'del')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button size="mini" @click="config.close">取 消</el-button>
      <el-button v-if="!config.readonly" size="mini" type="primary" @click="submit"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script lang="ts">
// import { cloneDeep } from 'lodash'
import { savePatrol, getPatrolDetail, getStepList } from '@/api/patrol'
import BaseForm from './baseForm.vue'
import { getDeviceByType } from '@/api/device'
import { ref, reactive, toRefs, computed, onBeforeMount, defineComponent, PropType } from 'vue'
import useProject from '@/hooks/project/useProject'
import useGlobal from '@/hooks/global/useGlobal'
import { removeSlash } from '@/utils/removeIdSlash'

export default defineComponent({
  components: { BaseForm },
  props: {
    config: {
      type: Object as PropType<DialogConfig>,
      default() {
        return {
          visible: false,
          title: '',
          close: () => {
            //do sth
          },
          currentId: '',
          readonly: false
        }
      }
    }
  },
  setup(props: any, ctx) {
    const { $message, $format, $confirm } = useGlobal()
    const dataForm = ref<any>({
      id: null,
      jobList: [],
      users: []
    })

    const state = reactive<{
      areaTree: NormalOption[]
      projectId: string
      dialogVisible: boolean
      selectArea: NormalOption[]
    }>({
      projectId: '',
      dialogVisible: false,
      selectArea: [],
      areaTree: []
    })

    const { getAreaTreeData } = useProject(props, ctx)

    const getDetail = async () => {
      try {
        const res = await getPatrolDetail(dataForm.value.id)
        console.log(res, 'getPatrolDetailgetPatrolDetail')
        dataForm.value = res.data
        if (dataForm.value.users) {
          dataForm.value.users = dataForm.value.users.split(',')
        } else {
          dataForm.value.users = []
        }
      } catch (err) {
        $message.error(err.data.message)
      }
    }

    const addStep = ({ projectId, devices, deviceId }: any = {}) => {
      dataForm.value.jobList.push({
        orderNum: dataForm.value.jobList.length + 1,
        projectId: projectId || [],
        deviceId: deviceId || '',
        criterionId: '',
        remark: '',
        devices: devices || [],
        steps: []
      })
    }

    const addMoreStep = async projectId => {
      const res = await getDeviceByType({
        page: 1,
        size: 999999
      })
      const devices = res.data.data.map(item => ({
        name: item.name,
        id: removeSlash(item.id.id)
      }))
      devices.forEach(device =>
        addStep({
          projectId,
          devices,
          deviceId: device.id
        })
      )
    }

    const addStepByProject = () => {
      if (!state.selectArea.length) {
        $message.warning('请选择区域')
        return
      }
      addMoreStep(state.selectArea)
      state.dialogVisible = false
    }

    const setStep = (step: any, option: string) => {
      if (option === 'up') {
        // orderNum     >0
        if (~~step.orderNum === 1) return
        dataForm.value.jobList[step.orderNum - 2].orderNum++
        dataForm.value.jobList[step.orderNum - 1].orderNum--
        dataForm.value.jobList.sort((a, b) => a.orderNum - b.orderNum)
      } else if (option === 'down') {
        if (~~step.orderNum === dataForm.value.jobList.length) return
        dataForm.value.jobList[step.orderNum].orderNum--
        dataForm.value.jobList[step.orderNum - 1].orderNum++
        dataForm.value.jobList.sort((a, b) => a.orderNum - b.orderNum)
      } else if (option === 'del') {
        $confirm('确定要删除该任务吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dataForm.value.jobList.splice(step.orderNum - 1, 1)
          dataForm.value.jobList.forEach(item => {
            if (item.orderNum > step.orderNum) {
              item.orderNum--
            }
          })
        })
      }
    }

    const projectIdChange = async (id, row: any) => {
      row.projectId = row.projectId[row.projectId.length - 1]
      // row.deviceTypes = ['其他', '管道', '物联网水表', 'PLC', '压力计']
      row.deviceType = ''
      row.deviceId = ''
      row.devices = []
      row.steps = []
      row.criterionId = ''
    }

    const deviceTypeChange = async (id: string, row: any) => {
      row.deviceId = ''
      row.devices = []
      row.steps = []
      row.criterionId = ''
      const res = await getDeviceByType({ projectId: row.projectId, deviceType: id })
      row.devices = res.data.map(item => ({
        name: item.nodeName,
        id: item.nodeId
      }))
    }

    const deviceChange = (id: string, row: any) => {
      row.steps = []
      row.criterionId = ''
      row.devices.forEach(async device => {
        if (device.id === id) {
          const res = await getStepList({
            page: 1,
            size: 9999,
            deviceType: row.deviceType
          })
          row.steps = res.data.data.map(item => ({
            name: item.name,
            id: item.id
          }))
          return
        }
      })
      console.log(id, row)
    }

    onBeforeMount(async () => {
      dataForm.value.id = props.config.currentId
      if (dataForm.value.id) {
        getDetail()
      } else {
        dataForm.value = { ...dataForm.value, periodTime: 0 }
        addStep()
      }
      state.areaTree = await getAreaTreeData()
    })

    const baseForm = ref<any>()

    const setBaseParams = (params: any) => {
      delete params.jobList
      Object.assign(dataForm.value, params)
    }

    const submit = async () => {
      if (!baseForm.value.checkRule()) {
        return false
      }
      console.log(dataForm.value)

      if (!dataForm.value.users || !dataForm.value.users.length) {
        $message.warning('请选择任务人')
        return
      } else if (!dataForm.value.jobList[0].deviceId || !dataForm.value.jobList[0].criterionId) {
        $message.warning('请添加任务')
        return
      } else if (dataForm.value.limitTime <= 0) {
        $message.warning('限制时间必须大于0')
        return
      }
      dataForm.value.users = dataForm.value.users.join(',')
      dataForm.value.jobList.forEach(item => {
        delete item.devices
        // delete item.deviceTypes
        delete item.steps
      })

      dataForm.value.periodTime = ~~dataForm.value.periodTime
      dataForm.value.limitTime = ~~dataForm.value.limitTime
      dataForm.value.executeTime = $format(dataForm.value.executeTime)

      try {
        const res = await savePatrol(dataForm.value)
        if (res.status === 200) {
          $message.success('操作成功')
          props.config.close()
          ctx.emit('refreshData')
        } else {
          $message.error('请求失败')
        }
      } catch (err) {
        $message.error(err.data.message)
      }
    }

    const rules = ref<FormRules>({
      selectArea: [{ required: true, message: '请选择区域', trigger: 'change' }]
    })

    const openDialog = () => {
      state.selectArea = []
      state.dialogVisible = true
    }

    const visible = computed(() => props.config.visible)

    return {
      ...toRefs(state),
      dataForm,
      rules,
      openDialog,
      submit,
      deviceChange,
      deviceTypeChange,
      projectIdChange,
      setStep,
      addStepByProject,
      addStep,
      visible,
      baseForm,
      setBaseParams,
      deviceTypes: ref<string[]>(['其他', '管道', '物联网水表', 'PLC', '压力计'])
    }
  }
})
</script>

<style lang="scss">
.patrolDialog {
  .el-dialog__body {
    padding: 0 !important;
  }
  .iconfont::before {
    margin-right: 5px;
  }
}
</style>
>

<style lang="scss" scoped>
.message-text {
  margin: 10px 0 12px 20px;
  color: #39b01c;
  line-height: initial;
}
.flexFromItem {
  display: flex;
  justify-content: space-between;
}
.baseForm {
  border-bottom: 1px solid #ebebeb;
  padding: 0 32px 12px;
}
.tableContainer {
  border-bottom: 1px solid #ebebeb;
  padding: 16px 32px 24px;
  .stepTable {
    margin-top: 16px;
    .selectText {
      background-color: #eeeeee;
      border-radius: 4px;
      line-height: 40px;
      width: 100%;
      height: 40px;
      border: 1px solid #dcdfe6;
      padding: 0 12px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
  .workContentInput {
    height: 40px;
    line-height: 40px;
    border: none;
    outline: none;
    width: 100%;
  }
}
</style>
